<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>Luren</title>
<style>
body{background-color:#DDEEF6;}
#up{height:40%;padding:50px 50px;}
#bar{float:left;height:100%;width:60%;color:#DDEEF6;background:#5599BB url(images/clouds.gif) no-repeat scroll 0 0;text-align:center;padding-top:40px;}
#login{float:left;padding:10px 10px;padding-left:50px;text-align:center;line-height:20px;}
#msg{height:30px;color:red;text-align:center;}
#down{text-align:center;}
#search{width:100%;height:40px;padding-top:10px;}
#search_btn{height:40px;width:60px;vertical-align:middle;}
#search_input{font-weight:bold;font-size:20px;height:40px;width:500px;vertical-align:middle;}
#footer{margin:20px 20px;}
.input_login {margin:5px 5px 5px;text-align:left;}
.input_login  input{color:#999999;height:30px;width:200px;border:solid 2px #000;margin:5px 5px; }

</style>
<script>
    var userMsg = "请输入用户名";
    var passMsg = "请输入密码"
    var spaceEor="用户名中不能有空格";
    var $ = Function("id","return document.getElementById(id);");
    window.onload = function(){$("user").value = userMsg;$("pass").value=passMsg;}
    function firstInput(obj)
    {
        document.getElementById("msg").innerHTML = "";
        if(obj.id == "user" && obj.value == userMsg)
        {
            obj.value = "";
            obj.style.color = "#000";
//            obj.style.fontSize="18px";
//            obj.style.fontWeight="bold";
        }
        if(obj.id == "pass" && obj.type=="text")
        {
            obj.setAttribute("type","password");
            obj.value = "";
            obj.style.color = "#000";
  //          obj.style.fontSize="18px";
    //        obj.style.fontWeight="bold";
        }
    }
    function spaceLeave(obj)
    {
        var input = obj.value;
        var id = obj.id;
        if(input.indexOf(" ") != -1)
        {
            if(id == 'user')
            {
                $("msg").innerHTML = spaceEor;
                input = '';
            }
        }
        if(id == "user" && input == "")
        {
            obj.style.color= "#999999";
            obj.value = userMsg;
      //      obj.style.fontSize = "";
        //    obj.style.fontWeight = "";
        }
        if(id == "pass" && input == "")
        {
            obj.style.color = "#999999";
            obj.value = passMsg;
            obj.setAttribute("type", "text");
        }
    }
    function submit()
    {
        var user = $("user").value;
        var pass = $("pass").value;
        var save = $("save").checked;
        if(user == ""  || user == userMsg)
        {
            $("msg").innerHTML = userMsg;
            $("user").value = '';
            return;
        }
        if(pass == "" || pass == passMsg)
        {
            $("msg").innerHTML = passMsg;
            $("pass").value = '';
            return;
        }
        $("login_form").submit();
    } 
</script>
</head>
<body>
<div id=up>
    <div id=bar>浏览网页，遇到陌生人，聊聊天！</div>
    <div id=msg></div>
    <div id=login><form action="./login" method="POST" id="login_form">
        <div class="input_login">帐号
            <input type=text id=user value="" onfocus="firstInput(this);" onblur="spaceLeave(this)" name="user"></div>
        <div class="input_login">密码
        <input type=text id=pass name=passwd value="" onfocus="firstInput(this);" onblur="spaceLeave(this);"><a href="#">取回密码</a></div>
        <input type=image id=login_btn value="登录" src="images/btn.jpg" onclick="submit();">
        <label><input type="checkbox" id="save" checked>保持登录</label>
        </form>
    </div>
</div>
<div id=down>
    <div id=search><input type="text" id=search_input><input type="button" value="搜索" id=search_btn></div>
    <div id=footer>Copyright &copy 2009 Luren All Rights Resserved</div>
</div>
</body>
</html>
